<template>
  <section class="page">
    <headerbar>
      换届提醒
      <div class="head-btn" slot="btn" @click="showImg">换届流程图</div>
    </headerbar>

    <div class="d-scroll list-text" style="">
      <cube-scroll ref="scroll" :options="options" @pulling-up="onPullingUp">
        <cube-swipe>
          <transition-group name="swipe" tag="div">
            <div class="" v-for="(data, index) in swipeData" :key="data.msgId">
              <cube-swipe-item ref="swipeItem" :index="index">
                <div @click="goDetail(data)" class="tongzhi-item">
                  <div class="icon"></div>
                  <div class="cont">
                    <h1>{{ data.title }}</h1>
                    <div class="color-tip">状态：{{ isRead(data) }}</div>
                    <div class="color-tip">{{ getTime(data.createTime) }}</div>
                    <div class="look-more">
                      查看详情
                      <i class="icon-arrow"
                        ><img
                          src="../../../../static/images/dangjian/dangwu/arrow-left.png"
                          alt=""
                      /></i>
                    </div>
                  </div>
                </div>
              </cube-swipe-item>
            </div>
          </transition-group>
        </cube-swipe>
        <!-- <div class="text-center no-data" v-if="swipeData.length===0">
          <img src="../../../../static/images/no_data.png" alt="">
          <p>暂无数据</p>
        </div> -->
        <!-- W noData -->
        <noData
          v-if="swipeData.length === 0"
        ></noData>
        <onBottom v-else-if="onBottom"></onBottom>
      </cube-scroll>
    </div>
  </section>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  name: "newTermReminder",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      pageIndex: 1,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    showImg() {
      let imgs = [this.tools.getImgUrl("af351fc3a32f40acab26dcc7e45e4558")];
      this.$createImagePreview(
        {
          initialIndex: 0,
          imgs: imgs,
        },
        (h) => {
          return h(
            "div",
            {
              class: {
                "image-preview-custom-header": false,
              },
              slot: "header",
            },
            ""
          );
        }
      ).show();
    },
    goDetail(data) {
      this.$router.push({ path: `/newTermReminderDetail/${data.msgId}` });
    },
    loadData() {
      let data = {
        loginId: "3750",
        pageNo: this.pageIndex + "",
        pageSize: "20",
        msgType: "hjtx",
      };
      this.fetchService.myReceiveList(data).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadPartakeData();
    },
    getTime(createTime) {
      return moment(createTime).format("YYYY年MM月DD日");
    },
    isRead(data) {
      if (data.readResult === "0") {
        return "未读";
      } else {
        return "已读";
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>
